<template>
  <div class="validation-result">
    <div class="result-summary">
      <el-icon 
        :size="24" 
        :color="result.isValid ? '#67c23a' : '#f56c6c'"
      >
        <component :is="result.isValid ? 'CircleCheck' : 'CircleClose'" />
      </el-icon>
      
      <div class="summary-text">
        <h3>{{ result.isValid ? '验证通过' : '验证失败' }}</h3>
        <p>检查了 {{ result.validatedCount }} 项配置</p>
      </div>
    </div>

    <!-- 错误列表 -->
    <div v-if="result.errors.length > 0" class="error-section">
      <h4 class="section-title">
        <el-icon><Warning /></el-icon>
        错误 ({{ result.errors.length }})
      </h4>
      
      <div class="error-list">
        <div 
          v-for="(error, index) in result.errors" 
          :key="index"
          class="error-item"
        >
          <el-tag type="danger" size="small">{{ error.severity }}</el-tag>
          <div class="error-content">
            <div class="error-header">
              <span class="error-id">{{ error.id }}</span>
              <span v-if="error.field" class="error-field">{{ error.field }}</span>
            </div>
            <div class="error-message">{{ error.message }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 警告列表 -->
    <div v-if="result.warnings.length > 0" class="warning-section">
      <h4 class="section-title">
        <el-icon><InfoFilled /></el-icon>
        警告 ({{ result.warnings.length }})
      </h4>
      
      <div class="warning-list">
        <div 
          v-for="(warning, index) in result.warnings" 
          :key="index"
          class="warning-item"
        >
          <el-tag type="warning" size="small">{{ warning.severity }}</el-tag>
          <div class="warning-content">
            <div class="warning-header">
              <span class="warning-id">{{ warning.id }}</span>
              <span v-if="warning.field" class="warning-field">{{ warning.field }}</span>
            </div>
            <div class="warning-message">{{ warning.message }}</div>
            <div v-if="warning.suggestion" class="warning-suggestion">
              建议：{{ warning.suggestion }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 成功状态 -->
    <div v-if="result.isValid" class="success-section">
      <el-result
        icon="success"
        title="配置验证通过"
        sub-title="所有配置项都符合要求，可以安全使用"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ValidationResult } from '@/types/schema'
import { CircleCheck, CircleClose, Warning, InfoFilled } from '@element-plus/icons-vue'

interface Props {
  result: ValidationResult
}

defineProps<Props>()
</script>

<style scoped>
.validation-result {
  padding: 16px;
}

.result-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--config-editor-card-bg);
  border-radius: 8px;
  border: 1px solid var(--config-editor-border);
}

.summary-text h3 {
  margin: 0 0 4px 0;
  color: var(--config-editor-text);
}

.summary-text p {
  margin: 0;
  color: var(--config-editor-text-secondary);
  font-size: 14px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 16px;
  color: var(--config-editor-text);
}

.error-section, .warning-section {
  margin-bottom: 24px;
}

.error-list, .warning-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.error-item, .warning-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--config-editor-card-bg);
  border-radius: 6px;
  border: 1px solid var(--config-editor-border);
}

.error-content, .warning-content {
  flex: 1;
}

.error-header, .warning-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.error-id, .warning-id {
  font-weight: 500;
  color: var(--config-editor-text);
}

.error-field, .warning-field {
  padding: 2px 6px;
  background: var(--config-editor-border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--config-editor-text-secondary);
}

.error-message, .warning-message {
  color: var(--config-editor-text);
  font-size: 14px;
  line-height: 1.4;
}

.warning-suggestion {
  margin-top: 8px;
  padding: 8px;
  background: var(--config-editor-bg);
  border-radius: 4px;
  font-size: 13px;
  color: var(--config-editor-text-secondary);
}

.success-section {
  text-align: center;
  padding: 32px;
}
</style>
